<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <section id='container'>
    <ul>
        <li id='list-item-one'>The mouse must pass over to increase the box width</li>
        <li id='list-item-two'>Release the mouse button to change the color</li>
        <li id='list-item-three'>The mouse must leave the box to change the text</li>
        <li id='list-item-four'>Click the mouse to make the fifth box appear</li>
        <li id='list-item-five'>You found me!</li>
        <button id='reset-button'>Reset</button>
    </ul>
  </section>
  
  <script  src="main.js"></script>
</body>
</html>
